<template>
	<NavigationBar @height="getHeight"></NavigationBar>
	<view class="index-container" :style="{marginTop:paddingT +'px'}">
		<Banner></Banner>
		<view class="index-middle-container">
			<view class="index-middle-part-container">
				<view class="index-middle-item">
					<view class="index-middle-item-pic" @tap="goPage(0)"></view>
					<view class="index-middle-item-title">果切</view>
				</view>
				<view class="index-middle-item">
					<view class="index-middle-item-pic" @tap="goPage(1)"></view>
					<view class="index-middle-item-title">通知</view>
				</view>
				<view class="index-middle-item">
					<view class="index-middle-item-pic" @tap="goPage(2)"></view>
					<view class="index-middle-item-title">文创</view>
				</view>
				<view class="index-middle-item">
					<view class="index-middle-item-pic" @tap="goPage(3)"></view>
					<view class="index-middle-item-title">配送</view>
				</view>
				<view class="index-middle-item">
					<view class="index-middle-item-pic" @tap="goPage(4)"></view>
					<view class="index-middle-item-title">敬请期待</view>
				</view>
			</view>
			<!-- <view class="index-middle-part-container">
				<view class="index-middle-item"></view>
				<view class="index-middle-item"></view>
				<view class="index-middle-item"></view>
				<view class="index-middle-item"></view>
				<view class="index-middle-item"></view>
			</view> -->
		</view>
		<view class="index-foot-container">
			<!-- <view class="index-foot-navi">
				<view class="index-foot-navi-item1" :class="data.notice_index==0?'index-foot-navi-item-active':''" @tap="changeNav(0)">学习</view>
				<view class="index-foot-navi-item2" :class="data.notice_index==1?'index-foot-navi-item-active':''" @tap="changeNav(1)">工作</view>
			</view> -->
			<!-- <swiper @change="getChange" :current="data.notice_index" class="index-foot-notice-container" :style="{height:data.heightFinal+'rpx',maxHeight:data.winHeight+'px'}">
				<swiper-item>
					<view class="homeData" :style="{height:data.heightFinal+'rpx',maxHeight:data.winHeight+'px'}">
						<view>
							<FootNotice :type="0" @learn="getLearn"> </FootNotice>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="homeData" :style="{height:data.heightFinal+'rpx',maxHeight:data.winHeight+'px'}">
						<view>
							<FootNotice :type="1" @work="getWork"></FootNotice>
						</view>
					</view>
				</swiper-item>
			</swiper> -->
			<view class="index-foot-notice-container">
				<view class="index-foot-notice-title">
					最新公告
				</view>
				<view class="">
					<FootNotice :type="10" @work="getWork" @learn="getLearn"></FootNotice>
				</view>
			</view>
		</view>
	</view>	
	<TabBar currentTab="home"></TabBar>
</template>

<script>
	import Banner from "../../components/index/banner.vue"
	import NavigationBar from "../../components/navigationBar/indexNavigationBar.vue"
	import FootNotice from "../../components/index/foot-notice.vue"
	import TabBar from "../../components/tabbar/tabbar.vue"
	import {onMounted, ref,reactive} from 'vue'
	import {useStore} from 'vuex'
	import global from '../../config/global.js'
	export default{
		name:"index",
		components:{
			Banner,
			NavigationBar,
			FootNotice,
			TabBar
		},
		setup(){
			let paddingT = ref(0);
			const store = useStore()
			
			let data = reactive({
				notice_index:0,
				dataLength:[0,0],
				heightS:[120,120],
				heightFinal:130,
				winHeight:0
			})

			onMounted(()=>{
				uni.getSystemInfo({
					success: (res) => {
						data.winHeight = res.windowHeight;
					}
				})
				console.log(store)
			})
		
			function getHeight(value){
				paddingT.value = value
			}
			
			function goPage(v){
				if(v==0){
					uni.navigateTo({
						url:"/page_fruit/fruit/fruit"
					})
				}else if(v==1){
					uni.navigateTo({
						url:"/pages/notice/notice-part"
					})
				}else if(v==2){
					uni.navigateTo({
						url:"/page_product/product/product"
					})
				}else if(v==3){
					uni.navigateTo({
						url:"/page_delivery/delivery/delivery"
					})
				}
			}
			
			function changeNav(value){
				data.notice_index=value
				data.heightFinal=data.heightS[value]
			}
			
			function getChange(e){
				changeNav(e.detail.current)
			}
			
			function getLearn(v){
				// console.log(v)
				data.dataLength[0]=v;
				data.heightS[0]=v*140+130
				if(data.notice_index==0) data.heightFinal = data.heightS[0]
			}
			
			function getWork(v){
				data.dataLength[1]=v;
				data.heightS[1]=v*140+120
				if(data.notice_index==1) data.heightFinal = data.heightS[1]
			}
			
			
			return {
				paddingT,
				getHeight,
				goPage,
				data,
				changeNav,
				getChange,
				getLearn,
				getWork
			}
		}
	}
</script>

<style>
	.index-container{
		margin-top: 70rpx;
		padding-bottom:calc(40rpx + env(safe-area-inset-bottom)) ;
	}
	
	.index-middle-container{
		margin:30rpx 0rpx;
	}
	
	.index-middle-part-container{
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 30rpx 0rpx;
		
	}
	
	.index-middle-item{
		width: 100rpx;
		height:135rpx;
		margin:0rpx 22rpx;
	}
	
	.index-middle-item-title{
		width: 100rpx;
		text-align: center;
		margin-top: 5rpx;
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx;
	}
	
	.index-middle-item-pic{
		width: 100rpx;
		height: 100rpx;
		background-color: pink;
		border-radius: 200rpx;
		
	}
		
	.login-container{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 100;
		top: 0;
	}
	
	.index-foot-container{
		width: 750rpx;
	}
	
	.index-foot-navi{
		width: 750rpx;
		height: 75rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	
	.index-foot-navi-item1{
		width: 100rpx;
		text-align: center;
		margin: 5rpx 0rpx 5rpx 180rpx;
		padding: 5rpx 1rpx 20rpx 1rpx;
		/* background-color: aqua; */
		font-size: 38rpx;
		font-weight: bold;
	}
	
	.index-foot-navi-item2{
		width: 100rpx;
		text-align: center;
		margin: 5rpx 180rpx 5rpx 0rpx;
		padding: 5rpx 1rpx 20rpx 1rpx;
		/* background-color: aqua; */
		font-size: 38rpx;
		font-weight: bold;
	}
	
	.index-foot-navi-item-active{
		border-bottom: #9BCDD2 5rpx solid;
		color: #9BCDD2;
	}
	
	.homeData{
		overflow: scroll;
	}
	
	.index-foot-notice-title{
		width: 400rpx;
		height: 65rpx;
		line-height: 65rpx;
		text-align: center;
		margin:15rpx 165rpx;
		font-size: 40rpx;
		border-bottom: 5rpx solid #9BCDD2;
		color: #9BCDD2;
		border-radius: 15rpx;
	}
	
</style>
